<template>
  <div class="distpicker-address-wrapper">
    <template>
      <div :class="addressHeader">
        <ul>
          <li :class="{'active': tab === 1}" @click="resetProvince">{{ currentProvince && !staticPlaceholder ? currentProvince : placeholders.province }}</li>
          <template v-if="!onlyProvince">
            <li v-if="showCityTab" :class="{'active': tab === 2}" @click="resetCity">{{  currentCity && !staticPlaceholder ? currentCity : placeholders.city }}</li>
            <li v-if="showAreaTab && !hideArea" :class="{'active': tab === 3}">{{ currentArea && !staticPlaceholder ? currentArea : placeholders.area }}</li>
          </template>
        </ul>
      </div>
      <div :class="addressContainer">
        <ul v-if="tab === 1">
          <li v-for="(item, index) in provinces"
              :class="{'active': item === currentProvince}"
              @click="chooseProvince(index,item)"
              :key="index">
            {{ index }}
          </li>
        </ul>
        <template v-if="!onlyProvince">
          <ul v-if="tab === 2">
            <li v-for="(item, index) in cities"
                :class="{'active': item === currentCity}"
                @click="chooseCity(index,item)"
                :key="index">
              {{ index }}
            </li>
          </ul>
          <ul v-if="tab === 3 && !hideArea">
            <li v-for="(item, index) in areas"
                :class="{'active': item === currentArea}"
                @click="chooseArea(item)"
                :key="index">
              {{ index }}
            </li>
          </ul>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import DISTRICTS from './districts';

const PROVINCE = 'province'
const CITY = 'city'
const COUNTY = 'county'

export default {
  name: 'v-distpicker',
  props: {
    province: { type: [String, Number], default: '' },
    city: { type: [String, Number], default: '' },
    county: { type: [String, Number], default: '' },
    hideArea: { type: Boolean, default: false },
    onlyProvince: { type: Boolean, default: false },
    staticPlaceholder: { type: Boolean, default: false },
    placeholders: {
      type: Object,
      default() {
        return {
          province: '省',
          city: '市',
          county: '区',
        }
      }
    },
    disabled: { type: Boolean, default: false },
    addressHeader: { type: String, default: 'address-header' },
    addressContainer: { type: String, default: 'address-container' },
  },
  data() {
    return {
      tab: 1,
      showCityTab: false,
      showAreaTab: false,
      provinces: [],
      cities: [],
      areas: [],
      currentProvince: this.determineType(this.province) || this.placeholders.province,
      currentCity: this.determineType(this.city) || this.placeholders.city,
      currentArea: this.determineType(this.area) || this.placeholders.area,
      DISTRICTS: DISTRICTS
    }
  },
  created() {
    // this.getAreaCode('北京','province');
    // this.getDistricts('city','1')
    if (this.area && !this.hideArea && !this.onlyProvince) {
      this.tab = 3
      this.showCityTab = true
      this.showAreaTab = true
      this.areas = this.getDistricts(this.getAreaCode(this.determineType(this.city), this.area))
    } else if (this.city && this.hideArea && !this.onlyProvince) {
      this.tab = 2
      this.showCityTab = true
      this.cities = this.getDistricts(this.getAreaCode(this.determineType(this.province)))
    } else {
      this.provinces = this.getDistricts('province')
    }
  },
  watch: {
    currentProvince(vaule) {
      this.$emit('province', this.setData(vaule,'province'))
      if (this.onlyProvince) this.emit('selected')
    },
    currentCity(value) {
      this.$emit('city', this.setData(value, 'city'))
      if (value != this.placeholders.city && this.hideArea) this.emit('selected')
    },
    currentArea(value) {
      this.$emit('area', this.setData(value,'area'))
      if (value != this.placeholders.area) this.emit('selected')
    },
    province(value) {
      this.currentProvince = this.province || this.placeholders.province
      this.cities = this.determineValue(this.currentProvince, this.placeholders.province)
    },
    city(value) {
      this.currentCity = this.city || this.placeholders.city
      this.areas = this.determineValue(this.currentCity, this.placeholders.city, this.currentProvince)
    },
    area(value) {
      this.currentArea = this.area || this.placeholders.area
    },
  },
  methods: {
    setData(value,type) {
      return {
        code: this.getAreaCode(value, type),
        value: value,
      }
    },
    emit(name) {
      let data = {
        province: this.setData(this.currentProvince,'province')
      }

      if (!this.onlyProvince) {
        this.$set(data, 'city', this.setData(this.currentCity,'city'))
      }

      if (!this.onlyProvince || this.hideArea) {
        this.$set(data, 'area', this.setData(this.currentArea,'area'))
      }

      this.$emit(name, data)
    },
    getCities(parentCode) {
      this.currentCity = this.placeholders.city
      this.currentArea = this.placeholders.area
      this.cities = this.determineValue(this.currentProvince, this.placeholders.province,'city',parentCode)
      console.log('------------------------this.cities1111----------')
      console.log(this.cities)
      console.log('------------------------this.cities1111----------')
      this.cleanList('areas')
      if (this.cities === null) {
        this.emit('selected')
        this.tab = 1
        this.showCityTab = false
      }
    },
    getAreas(parentCode) {
      this.currentArea = this.placeholders.area
      this.areas = this.determineValue(this.currentCity, this.placeholders.city, this.currentProvince,'county',parentCode)
      if (this.areas === null) {
        this.emit('selected')
        this.tab = 2
        this.showAreaTab = false
      }
    },
    resetProvince() {
      this.tab = 1
      this.provinces = this.getDistricts('province')
      this.showCityTab = false
      this.showAreaTab = false
    },
    resetCity() {
      this.tab = 2
      this.showCityTab = true
      this.showAreaTab = false
      this.getCities()
    },
    chooseProvince(name,code) {
      this.currentProvince = name
      if (this.onlyProvince) return
      this.tab = 2
      this.showCityTab = true
      this.showAreaTab = false
      this.getCities(code)
    },
    chooseCity(name,code) {
      this.currentCity = name
      if (this.hideArea) return
      this.tab = 3
      this.showCityTab = true
      this.showAreaTab = true
      this.getAreas(code)
    },
    chooseArea(name) {
      this.currentArea = name
    },
    getAreaCode(name,type) {
      if(type == 'province'){
        for(let x in this.DISTRICTS[PROVINCE]){
          if(x == name){
            return this.DISTRICTS[PROVINCE][x];
          }
        }
      }

      if(type == 'city'){
        for(let x in this.DISTRICTS[CITY]){
          console.log('*********************')
          console.log(x)
          console.log('*********************')
          if(x.hasOwnProperty(name)){
          }
        }
      }
    
    },
    getCodeValue(code) {
      for(let x in this.DISTRICTS) {
        for(let y in this.DISTRICTS[x]) {
          if(code === parseInt(y)) {
            return this.DISTRICTS[x][y]
          }
        }
      }
    },
    getDistricts(type,code) {
      if(type=='province'){
        return this.DISTRICTS[type] || []
      }else{
        for(let x in this.DISTRICTS[type]){
          if(x == code){
            return this.DISTRICTS[type][x] || []
          }
        }
      }
      
    },
    determineValue(currentValue, placeholderValue,type,parentCode) {
      if(currentValue === placeholderValue) {
        return []
      } else {
        return this.getDistricts(type,parentCode);
      }
    },
    determineType(value) {
      if(typeof value === 'number') {
        return this.getCodeValue(value)
      }

      return value
    },
    cleanList(name) {
      this[name] = []
    },
  }
}
</script>

<style lang="less">
.distpicker-address-wrapper {
  color: #9caebf;
  select {
    padding: .5rem .75rem;
    height: 40px;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

    option {
      font-weight: normal;
      display: block;
      white-space: pre;
      min-height: 1.2em;
      padding: 0px 2px 1px;
    }
  }
  ul {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
    }
  }
  .address-header {
    background-color: #fff;

    ul {
      display: flex;
      justify-content: space-around;
      align-items: stretch;

      li {
        display: inline-block;
        padding: 10px 10px 7px;

        &.active {
          border-bottom: #52697f solid 3px;
          color: #52697f;
        }
      }
    }
  }
  .address-container {
    background-color: #fff;

    ul {
      height: 100%;
      overflow: auto;

      li {
        padding: 8px 10px;
        border-top: 1px solid #f6f6f6;
        &.active {
          color: #52697f;
        }
      }
    }
  }
}
</style>
